<script lang="ts">
import { PropType, defineComponent } from 'vue'
import { Filter } from '../types/Filter'

interface State {
	filters: Filter[]
}

export default defineComponent({
	name: 'AppFilters',
	props: {
		activeFilter: {
			type: String as PropType<Filter>,
			required: true,
		},
	},
	data(): State {
		return {
			filters: ['All', 'Active', 'Done'],
		}
	},
	methods: {
		setFilter(filter: Filter) {
			this.$emit('setFilter', filter)
		},
	},
	emits: {
		setFilter: (filter: Filter) => filter,
	},
})
</script>

<template>
	<aside class="app-filters">
		<section class="toggle-group">
			<button
				class="button"
				v-for="filter in filters"
				:class="{
					'button--primary': activeFilter === filter,
				}"
				@click="setFilter(filter)"
			>
				{{ filter }}
			</button>
		</section>
	</aside>
</template>

<style scoped></style>
